window.addEventListener('load', async () => {
  const res = await axios({
    url: '/dashboard',
  })
  console.log(res)
  const data = res.data.overview
  const { year, salaryData, groupData } = res.data
  // const year = res.data.year
  // const salary = res.data.salaryData
  for (let key in data) {
    document.querySelector(`[name="${key}"]`).innerHTML = data[key]
  }
  renderAllSubject(year)
  renderClass(salaryData)
  renderClassSalary(groupData)
  renderGenderSalary(salaryData)
  renderNativePlace()
})

function renderAllSubject(arr) {
  var myChart = echarts.init(document.getElementById('line'))
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '2022学科走势',
      left: '26',
      top: '10',
      textStyle: {
        fontsize: '24px',
      },
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: 'skyblue',
        },
      },
      axisLabel: {
        color: '#000',
      },
      type: 'category',
      data: arr.map((item) => item.month),
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'skyblue',
        },
      },
    },
    series: [
      {
        data: arr.map((item) => item.salary),
        type: 'line',
        smooth: true,
        lineStyle: {
          width: '7',
          color: '#5f8eff',
        },
        symbolSize: '10',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#cbe4ff', // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: '#fff', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function renderClass(arr) {
  var myChart = echarts.init(document.getElementById('salary'))
  var option = {
    title: {
      text: '班级薪资分布',
      left: '10',
      top: '10',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '5%',
      left: 'center',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: arr.map((item) => ({
          value: item.g_count + item.b_count,
          name: item.label,
        })),
        color: ['#34d39a', '#fda224', '#3fceff', 'pink'],
      },
    ],
  }
  myChart.setOption(option)
}

function renderClassSalary(obj) {
  var myChart = echarts.init(document.getElementById('lines'))
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#3ad49d', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#4ba0ed', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  }
  myChart.setOption(option)

  // 渲染
  let str = ''
  for (let k in obj) {
    str += `<button type="button" class="btn btn-xs">${k}</button>`
  }
  const btns = document.getElementById('btns')
  btns.innerHTML = str
  const btnList = document.querySelectorAll('#btns button')
  btnList.forEach((btn) => {
    btn.addEventListener('click', function () {
      for (let i = 0; i < btnList.length; i++) {
        btnList[i].classList.remove('btn-blue')
      }
      this.classList.add('btn-blue')

      // 点击切换数据
      const index = this.innerHTML
      myChart.setOption({
        xAxis: {
          data: obj[index].map((item) => item.name),
        },
        series: [
          {
            type: 'bar',
            data: obj[index].map((item) => item.hope_salary),
          },
          {
            type: 'bar',
            data: obj[index].map((item) => item.salary),
          },
        ],
      })
    })
  })
  btnList[0].click()
}

function renderGenderSalary(arr) {
  var myChart = echarts.init(document.getElementById('gender'))
  var option = {
    title: [
      {
        text: '男女薪资分布',
        left: '15',
        top:'20'
      },
      {
        text: '男生',
        left: '50%',
        top: '46%',
        textAlign: 'center',
      },
      {
        text: '女生',
        left: '50%',
        top: '91%',
        textAlign: 'center',
      },
    ],
    tooltip: {
      trigger: 'item',
    },

    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['25%', '35%'],
        data: arr.map((item) => ({
          value: item.b_count,
          name: item.label,
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        center: ['50%', '30%'],
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['25%', '35%'],
        data: arr.map((item) => ({
          value: item.g_count,
          name: item.label,
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        center: ['50%', '72%'],
      },
    ],
  }
  myChart.setOption(option)
}

function renderNativePlace() {
  var myChart = echarts.init(document.getElementById('map'))
  /* 
请勿在原图上直接修改保存
*/
  function mapTooltipClick(name) {
    alert(name)
  }

  function tooltipCharts() {
    console.log(arguments[0])
    var myChart1 = echarts.init(document.getElementById('tooltipBarId'))
    var option = {
      tooltip: {},
      dataset: {
        source: [
          [
            'xAxis',
            '201701',
            '201702',
            '201703',
            '201704',
            '201705',
            '201706',
            '201707',
            '201708',
            '201709',
            '20170',
            '201710',
            '20170',
            '201801',
          ],
          [
            'amount',
            41.1,
            30.4,
            65.1,
            53.3,
            83.8,
            98.7,
            65.1,
            53.3,
            41.1,
            30.4,
            53.3,
            41.1,
            53.3,
            83.8,
          ],
        ],
      },
      xAxis: {
        type: 'category',
        interval: true,
        axisLabel: {
          rotate: 45,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {},
      color: ['#4FA8F9', '#F5A623'],
      grid: {
        show: true,
        backgroundColor: '#FAFAFA',
        left: 30,
        right: 20,
        top: 20,
      },
      series: [
        {
          type: 'bar',
          smooth: true,
          seriesLayoutBy: 'row',
          barWidth: 10,
        },
      ],
    }
    myChart1.setOption(option)
  }
  let option = {
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      orient: 'horizontal',
      inRange: {
        color: ['#e0ffff', '#006edd'],
        symbolSize: [30, 100],
      },
    },
    tooltip: {
      padding: 8,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#fff',
        decoration: 'none',
      },
    },
    series: [
      {
        name: '接入医院数量',
        type: 'map',
        mapType: 'china',
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
          emphasis: {
            label: {
              show: true,
            },
          },
        },
        label: {
          normal: {
            //静态的时候展示样式
            show: true, //是否显示地图省份得名称
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
          emphasis: {
            //动态展示的样式
            color: '#fff',
          },
        },
        data: [
          {
            name: '北京',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '天津',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '上海',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '重庆',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '河北',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '河南',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '云南',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '辽宁',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '黑龙江',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '湖南',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '安徽',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '山东',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '新疆',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '江苏',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '浙江',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '江西',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '湖北',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '广西',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '甘肃',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '山西',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '内蒙古',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '陕西',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '吉林',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '福建',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '贵州',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '广东',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '青海',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '西藏',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '四川',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '宁夏',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '海南',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '台湾',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '香港',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
          {
            name: '澳门',
            value: Math.round(Math.random() * 1000),
            tipData: [
              Math.round(Math.random() * 1000),
              Math.round(Math.random() * 1000),
            ],
          },
        ],
      },
    ],
  }
  var count = 0
  var timeTicket = null
  var dataLength = option.series[0].data.length
  timeTicket && clearInterval(timeTicket)
  timeTicket = setInterval(function () {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: count % dataLength,
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: count % dataLength,
    })
    count++
  }, 1000)

  myChart.on('mouseover', function (params) {
    console.log(params)
    clearInterval(timeTicket)
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex,
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: params.dataIndex,
    })
  })
  myChart.on('mouseout', function (params) {
    timeTicket && clearInterval(timeTicket)
    timeTicket = setInterval(function () {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
      })
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: count % dataLength,
      })
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: count % dataLength,
      })
      count++
    }, 1000)
  })
  myChart.setOption(option)
}
